<template>
  <div class="tabClass">
      <van-tabs
        tab-class="tabClass"
        v-model="active"
        @change="onchange"
        @rendered="fn_rendered"
      >
          <van-tab
            v-for="(item, index) in list"
            :title="item.title"
            :name="item.classId"
            :key="index"
            :to="'/' + item.classId + '/' + item.id"
          >
          </van-tab>
      </van-tabs>

    <!-- <van-tabs v-model="active" active="{{ active }}" @change="onchange" @rendered="fn_rendered">
        <van-tab v-for="(item, index) in list" :title="item.title" :name="item.classId" :key="index" :to="'/'+item.classId+'/'+item.id" >  
        </van-tab>
      </van-tabs> -->
  </div>
</template>

<script>
// import instance from '../../api/request'
import axios from "axios";

export default {
  name: "HeaderNavBar",
  data() {
    return {
      list: [],
      active: 0,
    };
  },
  created() {
    this.fn_getData();
    // this.fn_rendered()
  },
  methods: {
    async fn_getData() {
      let { data } = await axios.get("./pdd.json");
      console.log(data);
      this.list = data.home.navbar;
    },
    onchange(ind) {
      this.active = ind;
    },
    fn_rendered() {
      this.active = location.hash.split("/")[1];
    },
  },
};
</script>

<style lang="less" scoped>
.tabClass {
  width: 7.5rem;
  background: #fff;
  height: 0.84rem;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}
/deep/ .van-tabs__wrap--scrollable .van-tab {
  padding: 0 12px;
}
.ccc {
  width: 7.5rem;
  overflow: hidden;
}
/deep/ .van-tabs__nav--line {
  width: 7.5rem;
}
</style>
